<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-标准流</title>
</head>
<body>
    <!-- 
        标准流(排版布局)
            {
                块元素                  从上到下 垂直布局
                行内元素/行内块元素      从左到右 水平布局
            }
        脱标(脱离标准流)
            {
                ...
            }
     -->
    <!-- 标准流(块元素) -->
    <h1>中国</h1>
    <p>西安</p>
    <div>真的热，昨天下雨了...</div>
    <hr>
    <!-- 标准流(行内元素) -->
    <a href="">霉国</a>
    <span>通货</span>
    <em>膨胀...</em>
    <hr>
    <style>
        i{
            /* 转成行内块元素 */
            display: inline-block;
            width: 100px;
            height:100px;
            /* 垂直居中 */
            line-height: 100px;
            background: red;
            /* 水平居中 */
            text-align: center;
            color: #fff;
        }
    </style>
    <!-- 标准流(行内块元素) -->
    <i>小日本</i>
    <i>最近</i>
    <i>需要敲打</i>
</body>
</html>